 
	<style type="text/css">
		.container-box{
			display: flex;
		}
		.semanticui-leftbox{
			flex: 0 0 20vw;
			height: 100vh;
			background-color: #666;
		}
		.rightbox{
			flex: 0 0 80vw;
			height: 100vh;
			background-color: #888;
		}
		
		
	</style>



<!-- semanticui / 侧边栏布局 start-->
	<div class="container-box">
		<div class="semanticui-leftbox">
			<!-- 嵌入semanticui框架的侧边栏组件 -->
			<!-- 框架的组件文档 "https://zijieke.com/semantic-ui/modules/sidebar.php" -->
			<div class="ui left demo vertical inverted labeled icon menu" style="height: 100%;width: 100%">
			  <a class="item">
			    <i class="home icon"></i>
			    Home
			  </a>
			  <a class="item">
			    <i class="block layout icon"></i>
			    Topics
			  </a>
			  <a class="item">
			    <i class="smile icon"></i>
			    朋友
			  </a>
			</div>
			<!-- semanticui框架的侧边栏组件结束 -->
		</div>


		<!-- 右侧内容区域 -->
		<div class="rightbox">
			
			
		</div>
	</div>
	
	<script type="text/javascript">
		
		//获取列表项
		var navitem=$('.menu .item');
		//为item执行点击事件
		navitem.click(function(){
			console.log($(this).index());
			//dosomething
		});
	</script>
<!-- semanticui / 侧边栏布局 end-->